<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>BTVD</title>
		<link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css" />
		<link href="../css/index.css" rel="stylesheet">
		<link href="../css/app.css" rel="stylesheet">
		<!-- 引入样式 -->
	</head>
	<body>
		<div id="app" class="qx_main">
			<!--必须外面包一层div，并渲染这个div里的内容才会显示。-->
			<el-container class="qx_btvd_container">
				<el-header>
					<div class="qx_logo"><img src="../images/logo.png"></div>
					<div class="qx_right">
						<el-dropdown>
							<span class="el-dropdown-link">
								<i class="fa fa-user"></i> admin
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item>
									<el-button class="qx_topbtn" @click="dialogVisible = true">修改密码</el-button>
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
						<el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%" center>
							<el-form :model="changepasswordForm" :rules="rules" ref="changepasswordForm" label-width="100px" size="small"
							 class="plr30">
								<el-form-item label="用户名" prop="username">
									<el-input v-model="changepasswordForm.username" placeholder="用户名"></el-input>
								</el-form-item>
								<el-form-item label="原密码" prop="originalPassword">
									<el-input v-model="changepasswordForm.originalPassword" placeholder="原密码"></el-input>
								</el-form-item>
								<el-form-item label="新密码" prop="newlPassword">
									<el-input v-model="changepasswordForm.newlPassword" placeholder="新密码"></el-input>
								</el-form-item>
								<el-form-item label="确认新密码" prop="newlPasswordConfirm">
									<el-input v-model="changepasswordForm.newlPasswordConfirm" placeholder="确认新密码"></el-input>
								</el-form-item>
							</el-form>
							<span slot="footer" class="dialog-footer">
								<el-button @click="dialogVisible = false">取 消</el-button>
								<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
							</span>
						</el-dialog>
					</div>
				</el-header>
				<el-container class="pr">
					<el-radio-group v-model="isCollapse" @change="toggleName" class="pabottom">
						<el-radio-button v-if="display" :label="false">{{open}}</el-radio-button>
						<el-radio-button v-else :label="true">{{close}}</el-radio-button>
					</el-radio-group>
					<div class="qx_bg_color">
						<!--el-scrollbar-->
						<el-scrollbar class="qx_overx_hidden">
							<!--element ui滚动条-->
							<el-menu default-active="2-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse"
							 background-color="#27304f" text-color="#fff" active-text-color="#009bb1">
								<!--菜单属性、可以添加样式：-->
								<el-menu-item index="1">
									<i class="fa fa-home"></i>
									<span slot="title">首页</span>
								</el-menu-item>
								<el-submenu index="2">
									<template slot="title">
										<i class="fa fa-video-camera"></i>
										<span>设备管理</span>
									</template>
									<el-menu-item-group>
										<el-menu-item index="2-1"><i class="fa fa-circle-thin qx_icontwo"></i> 设备管理</el-menu-item>
										<el-menu-item index="2-2"><i class="fa fa-circle-thin qx_icontwo"></i> 设备组管理</el-menu-item>
									</el-menu-item-group>
								</el-submenu>
								<el-submenu index="3">
									<template slot="title">
										<i class="fa fa-lightbulb-o"></i>
										<span slot="title">规则检测管理</span>
									</template>
									<el-menu-item-group>
										<el-menu-item index="3-1"><i class="fa fa-circle-thin qx_icontwo"></i> 检测规则管理</el-menu-item>
										<el-menu-item index="3-2"><i class="fa fa-circle-thin qx_icontwo"></i> 检测任务管理</el-menu-item>
									</el-menu-item-group>
								</el-submenu>
								<el-submenu index="4">
									<template slot="title">
										<i class="fa fa-bell"></i>
										<span slot="title">告警管理查询</span>
									</template>
									<el-menu-item-group>
										<el-menu-item index="4-1"><i class="fa fa-circle-thin qx_icontwo"></i> 告警管理查询</el-menu-item>
									</el-menu-item-group>
								</el-submenu>
								<el-menu-item index="5">
									<i class="fa fa-map"></i>
									<span slot="title">地图总览</span>
								</el-menu-item>
								<el-menu-item index="6">
									<i class="fa fa-file-excel-o"></i>
									<span slot="title">报表管理</span>
								</el-menu-item>
								<el-submenu index="7">
									<template slot="title">
										<i class="fa fa-desktop"></i>
										<span>系统管理</span>
									</template>
									<el-menu-item-group>
										<el-menu-item index="7-1"><i class="fa fa-circle-thin qx_icontwo"></i> 用户管理</el-menu-item>
										<el-menu-item index="7-2"><i class="fa fa-circle-thin qx_icontwo"></i> 角色管理</el-menu-item>
										<el-menu-item index="7-3"><i class="fa fa-circle-thin qx_icontwo"></i> 组织机构管理</el-menu-item>
									</el-menu-item-group>
								</el-submenu>
							</el-menu>
						</el-scrollbar>
					</div>

					<el-main class="qx_main_outbox">
						<!--主体区域-->
						<div class="qx_main_inbox">
							<!--内页内容-->
							<el-card class="box-card h100p" shadow="never">
								<div slot="header" class="clearfix">
									<ul class="qx_tablenav left">
										<li>
											<el-button class="qx_btn green fl" plain icon="el-icon-plus" size="mini" @click="dialogVisibleAdd = true">添加设备</el-button>
											<el-popconfirm title="确定要删除所选内容吗？">
												<el-button slot="reference" class="qx_btn red fl" plain icon="el-icon-delete" size="mini">删除设备</el-button>
											</el-popconfirm>
										</li>
										<li>
											<el-button class="qx_btn blue fl" plain icon="fa fa-mail-reply" size="mini">导入</el-button>
											<el-button class="qx_btn blue fl" plain icon="fa fa-share-square-o" size="mini">导出</el-button>
											<el-button class="qx_btn blue fl" plain icon="fa fa-podcast" size="mini" @click="dialogVisibleTest = true">单次检测</el-button>
										</li>
									</ul>
									<el-dialog title="单次测试" :visible.sync="dialogVisibleTest" width="30%" center>
										<el-alert class="mb30" title="即将对已选择设备进行一次检测，检测任务后台进行，检测结果请在“检测结果查询”界面查看。" type="warning" :closable="false">
										</el-alert>
										<el-form :model="TestForm" :rules="rules" ref="TestForm" label-width="100px" size="small" class="plr30">
											<el-form-item label="选择检查规则" prop="Test">
												<el-select v-model="TestForm.Test" placeholder="选择检查规则" width="200px">
													<el-option label="检查规则A" value="1"></el-option>
													<el-option label="检查规则B" value="2"></el-option>
												</el-select>
											</el-form-item>
										</el-form>
										<span slot="footer" class="dialog-footer">
											<el-button @click="dialogVisibleTest = false">取 消</el-button>
											<el-button type="primary" @click="dialogVisibleTest = false">确 定</el-button>
										</span>
									</el-dialog>
									<el-dialog title="新增设备" :visible.sync="dialogVisibleAdd" width="50%" center>
										<el-form :model="newgVDForm" :rules="rules" ref="newgVDForm" label-width="120px" size="small" class="plr30 clearfix">
											<el-form-item label="设备名称" prop="typename" class="qx_50pl">
												<el-input v-model="newgVDForm.typename" placeholder="请输入设备名称"></el-input>
											</el-form-item>
											<el-form-item label="设备类型" prop="sbtype" class="qx_50pl">
												<el-select v-model="newgVDForm.sbtype" placeholder="请选择设备类型">
													<el-option label="摄像头" value="1"></el-option>
													<el-option label="NVR" value="2"></el-option>
													<el-option label="DVR" value="3"></el-option>
												</el-select>
											</el-form-item>
											<el-form-item label="所属组织机构" prop="frameworks" class="qx_50pl">
												<el-cascader v-model="newgVDForm.frameworks" :options="options" :show-all-levels="false"></el-cascader>
											</el-form-item>
											<el-form-item label="取流方式" prop="flowWay" class="qx_50pl">
												<el-select v-model="newgVDForm.flowWay" placeholder="请选择取流方式">
													<el-option label="RTSP" value="1"></el-option>
													<el-option label="海康SDK" value="2"></el-option>
													<el-option label="大华SDK" value="3"></el-option>
												</el-select>
											</el-form-item>
											<el-form-item label="RTSP地址" prop="addressRTSP" class="qx_50pl"><!--取流方式RTSP时显示RTSP地址-->
												<el-input v-model="newgVDForm.addressRTSP" placeholder="请输入RTSP地址"></el-input>
											</el-form-item>
											<el-form-item label="IP地址" prop="addressIP" class="qx_50pl"><!--取流方式SDK时显示IP地址-->
												<el-input v-model="newgVDForm.addressIP" placeholder="请输入IP地址"></el-input>
											</el-form-item>
											<el-form-item label="端口号" prop="ports" class="qx_50pl">
												<el-input v-model="newgVDForm.ports" placeholder="请输入端口号"></el-input>
											</el-form-item>
											<el-form-item label="用户名" prop="newuserName" class="qx_50pl">
												<el-input v-model="newgVDForm.newuserName" placeholder="请输入用户名"></el-input>
											</el-form-item>
											<el-form-item label="密码" prop="password" class="qx_50pl">
												<el-input v-model="newgVDForm.password" placeholder="请输入密码" show-password></el-input>
											</el-form-item>
											<el-form-item label="经度" prop="Longitude" class="qx_50pl">
												<el-input v-model="newgVDForm.Longitude" placeholder="请输入经度"></el-input>
											</el-form-item>											
											<el-form-item label="纬度" prop="Latitude" class="qx_50pl">
												<el-input v-model="newgVDForm.Latitude" placeholder="请输入纬度"></el-input>
											</el-form-item>
											<el-form-item label="位置信息" prop="Locationxx" class="qx_50pl">
												<el-input v-model="newgVDForm.Locationxx" placeholder="请输入位置信息"></el-input>
											</el-form-item>
											<el-form-item label="连接设备" prop="connectedIP" class="qx_50pl">
												<el-input v-model="newgVDForm.connectedIP" placeholder="请输入连接设备IP"></el-input>
											</el-form-item>
											
										</el-form>
										<span slot="footer" class="dialog-footer">
											<el-button @click="dialogVisibleAdd = false">取 消</el-button>
											<el-button type="primary" @click="dialogVisibleAdd = false">确 定</el-button>
										</span>
									</el-dialog>
									<div class="fr">
										<el-select class="fl w150 mr10" v-model="sbtype" clearable placeholder="请选择设备类型" size="mini">
											<el-option label="摄像机" value="1"></el-option>
											<el-option label="NVR" value="2"></el-option>
											<el-option label="DVR" value="3"></el-option>
										</el-select>
										<el-input class="fl w150 mr10" v-model="inputsearch" size="mini" placeholder="模糊查询设备名，IP"></el-input>
										<el-button class="fl" type="primary" icon="el-icon-zoom-in" size="mini">查询</el-button>
									</div>
								</div>
								<div class="qx_table_box">
									<template>
										<el-table :data="tableData" height="100%" tooltip-effect="dark" :default-sort="{prop: 'date'}"
										 @selection-change="handleSelectionChange" stripe>
											<el-table-column type="selection" fixed="left" width="50"></el-table-column>
											<el-table-column prop="devtype"  width="120" label="设备类型" sortable></el-table-column>
											<el-table-column prop="devname" width="150" label="设备名称" sortable></el-table-column>
											<el-table-column prop="institutional" width="150" label="所属组织机构" sortable></el-table-column>
											<el-table-column prop="tgroup" width="180" label="设备组" sortable></el-table-column>
											<el-table-column prop="ways" width="120" label="取流方式" sortable></el-table-column>
											<el-table-column prop="ipaddress" width="120" label="设备IP" sortable></el-table-column>
											<el-table-column prop="port" width="120" label="端口号" sortable></el-table-column>
											<el-table-column prop="equipment" width="120" label="用户名" sortable></el-table-column>
											<el-table-column prop="password" width="120" label="密码" sortable></el-table-column>
											<el-table-column prop="location" width="180" label="安装位置" sortable></el-table-column>
											<el-table-column prop="longitude" width="180" label="经度" sortable></el-table-column>
											<el-table-column prop="latitude" width="180" label="纬度" sortable></el-table-column>
											<el-table-column prop="States"  width="120" label="设备状态" sortable></el-table-column>
											<el-table-column label="操作" width="110" fixed="right">
												<template slot-scope="scope">
													<el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
													<el-popconfirm title="确定要删除所选内容吗？">
														<el-button slot="reference" type="danger" size="mini">删除</el-button>
													</el-popconfirm>
												</template>
											</el-table-column>
										</el-table>
									</template>
									<div class="qx_page_box">
										<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1"
										 :page-size="20" background layout="total, prev, pager, next, jumper" :total="100"></el-pagination>
										<!--翻页：-->
									</div>
								</div>
							</el-card>
						</div>
					</el-main>
				</el-container>
			</el-container>
		</div>
	</body>
	<script src="../js/vue.min.js"></script>
	<script src="../js/vue-router.js"></script>
	<script src="../js/element.min.js"></script>
	<script>
		new Vue({
			el: '#app', //渲染id为app的div
			data: function() { //数据
				return {
					//竖行导航菜单
					isCollapse: true, //导航菜单初始时是状态
					visible: false,
					display: true,
					open: ">",
					close: "<",
					dialogVisible: false, //修改密码弹窗
					dialogVisibleAdd: false, //添加设备
					dialogVisibleTest:false,//单次测试
					changepasswordForm: { //修改密码表单
						username: 'admin0001',
						originalPassword: '',
						newlPassword: '',
						newlPasswordConfirm: ''
					},
					newgVDForm: { //添加设备表单
						typename: '',//设备名称
						sbtype: '',//设备类型
						frameworks:'',//所属组织机构
						addressRTSP:'',//RTSP地址
						addressIP: '',//IP地址
						ports: '',//端口号
						newuserName: '',//用户名
						password: '',				
						Longitude: '',	
						Latitude: '',		
						Locationxx: '',
						connectedIP:''
					},
					TestForm:{
						Test:''//选择检测规则
					},
					options: [{//所属组织机构联级选择器
						value: 'jilin',
						label: '吉林省交通运输信息化',
						children: [{
							value: 'gaoguanju',
							label: '高管局',
							children: [{
								value: 'siping',
								label: '四平分局'
							}, {
								value: 'meihe',
								label: '梅河分局'
							}, {
								value: 'dehui',
								label: '德惠分局'
							}, {
								value: 'songyuan',
								label: '松原分局'
							}]
						}, {
							value: 'jitong',
							label: '吉通公司'
						}]
					}, ],
					rules: {
						username: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						}],
						originalPassword: [{
							required: true,
							message: '请输入原始面膜',
							trigger: 'blur'
						}],
						newlPassword: [{
							required: true,
							message: '请输入新密码',
							trigger: 'blur'
						}],
						newlPasswordConfirm: [{
							required: true,
							message: '请确认新密码',
							trigger: 'blur'
						}],
						typename: [{
							required: true,
							message: '请输入设备名称',
							trigger: 'blur'
						}],
						sbtype: [{
							required: true,
							message: '请选择设备类型',
							trigger: 'change'
						}],
						frameworks: [{
							required: true,
							message: '请选择组织机构',
							trigger: 'change'
						}],
						flowWay: [{
							required: true,
							message: '请选取流方式',
							trigger: 'change'
						}],
						addressIP: [{
							required: true,
							message: '请输入IP地址',
							trigger: 'blur'
						}],
						addressRTSP:[{
							required: true,
							message: '请输入RTSP地址',
							trigger: 'blur'
						}],
						ports:[{
							required: true,
							message: '请输入端口号',
							trigger: 'blur'
						}],
						newuserName:[{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						}],
						password:[{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						}],
					},
					sbtype: '',
					inputsearch: '', //模糊查询设备名，IP
					//表格
					tableData: [{ //table
						devtype: '摄像机',
						devname: '巴拉巴拉巴拉设备',
						institutional: '所属组织机构0001',
						tgroup: 'SSDWE21321321412312',
						ways: 'ewqe方式',
						ipaddress: '128.130.10.31',
						port: '41343254242',
						equipment: 'adminusrer',
						password: '21412312',
						location: 'testtesttesttest',
						longitude: '321413,413213,42321',
						latitude: '542432,43434,231',
						States: '良好'
					}, { //table
						devtype: '摄像机',
						devname: '巴拉巴拉巴拉设备',
						institutional: '所属组织机构0001',
						tgroup: 'SSDWE21321321412312',
						ways: 'ewqe方式',
						ipaddress: '128.130.10.31',
						port: '41343254242',
						equipment: 'adminusrer',
						password: '21321412312',
						location: 'testtesttesttest',
						longitude: '321413,413213,42321',
						latitude: '542432,43434,231',
						States: '良好'
					}],
					currentPage1: 2, //翻页:当前页
				}
			},
			methods: { //方法
				handleOpen(key, keyPath) { //展开指定的 sub-menu
					console.log(key, keyPath);
				},
				handleClose(key, keyPath) { //收起指定的 sub-menu
					console.log(key, keyPath);
				},
				toggleName: function() { //点击切换展开，收缩按钮		
					if (this.display === true) {
						this.display = false;
					} else {
						this.display = true;
					}
				},
				handleSelectionChange(val) { //多选
					this.multipleSelection = val;
				},
				formatter(row, column) { //排序
					return row.address;
				},
				handleSizeChange(val) { //翻页:每页XX条
					console.log(`每页 ${val} 条`);
				},
				handleCurrentChange(val) { //当前页:
					console.log(`当前页: ${val}`);
				}
			}
		})
	</script>
</html>
